import React from 'react';
import {Text,View,Image,PanResponder,StatusBar} from 'react-native';
import styles from  './style';
import Icon from 'react-native-vector-icons/Ionicons';
import Utils from  '../utils';


class Menu extends React.Component{
    render(){}
}

export  default class extends React.Component{
    constructor(){
        super();
        this.state = {
            showDrop:false
        }
    }

    _previousLeft = -0.7 * Utils.size.width-10;
    _previousOpacity = 0;
    _minLeft = -0.7 * Utils.size.width - 10;
    _menuStyles = {};
    _dropStyles = {};
    _CustomLayoutLinear ={
        duration:200,
        create:{
            type:LayoutAnimation.Types.linear,
            property:LayoutAnimation.Properties.left,
        },
        update:{
            type:LayoutAnimation.Types.curveEaseInEaseOut
        }
    };
    menu = {null:?{setNativeProps(props:Object):void}};
    drop = {null:?{setNativeProps(props:Object):void}};

    _updatePostion(){
        this.menu && this.menu.setNativeProps(this._menuStyles);
        this.drop && this.drop.setNativeProps(this._dropStyles);
    }


    _endMove(evt,gestureState){
        if (gestureState.vx<0 ||gestureState.dx<0){
            this._menuStyles.style.left = this._minLeft;
            this._dropStyles.style.opacity = 0;
            this._previousLeft = this._minLeft;
            this._previousOpacity = 0;
            this.setState({
                showDrop:false
            })
        }
        if (gestureState.vx>0 ||gestureState.dx>0){
            this._menuStyles.style.left =0;
            this._dropStyles.style.opacity = 1;
            this._previousLeft = 0;
            this._previousOpacity = 1;

        }

        this._updatePostion();
        LayoutAnimation.configureNext(this._CustomLayoutLinear);
    }

    componentWillMount(){
        this._panResponder = PanResponder.create({
            onStartShouldSetResponder:(evt,gestureState)=>true,
            onMoveShouldSetPanResponder:(evt,gestureState)=>{return gestureState.dy/gestureState.dx!=0},
            onPanResponderGrant:(evt,gestureState)=>{ this.setState({  showDrop:true })},
            nPanResponderMove: (evt, gestureState) => {
                this._menuStyles.style.left = this._previousLeft + gestureState.dx;
                this._dropStyles.style.opacity = this._previousOpacity+Math.pow(gestureState.dx/(-this._minLeft),0.5);
                if (this._menuStyles.style.left>0) {
                    this._menuStyles.style.left = 0;
                    this._dropStyles.style.opacity = 1;
                };
                if (this._menuStyles.style.left < this._minLeft) {
                    this._menuStyles.style.left = this._minLeft;
                    this._dropStyles.style.opacity = 0;
                };
                this._updatePosition();
                LayoutAnimation.configureNext(this._CustomLayoutLinear);
            },
            onPanResponderTerminationRequest: (evt, gestureState) => true,
            onPanResponderRelease: (evt, gestureState) => this._endMove(evt, gestureState),
            onPanResponderTerminate: (evt, gestureState) => this._endMove(evt, gestureState),
            onShouldBlockNativeResponder: (evt, gestureState) => true,
        });
        this._menuStyles = {
            style: {
                left: this._previousLeft,
            },
        };
        this._dropStyles = {
            style: {
                opacity: this._previousOpacity,
            },
        };
    }

    componentDidMount() {
        this._updatePosition();
        StatusBarIOS.setStyle(1);
    }
}


